<template>
  <div>


	<myheader></myheader>

	<br /><br />
	<!-- 面包屑导航 -->
	<Breadcrumb :datas='datas'></Breadcrumb>
	<button @click="changelang">语言切换</button>

	<section class="featured-block text-center">
		<div class="container">
			七牛云上传:
			<input type="file" @change="upload_qiniu">
			<br />
		</div>
		<div v-if="url">
			<br />
			{{ $t('m.video_title') }}
			<br />
			<video id='video' weight="300" height="220" controls="controls" autoplay='autoplay' muted>
				<source :src="url" type="video/mp4" />
				Your browser does not support the video tag.
			</video>
				
			<br />
			{{ $t('m.video_message') }}
			<br />

		</div>
		

		<br><br>

			<Button @click="changepic">{{mybutton}}</Button>


		<br><br>


	</section>
	<myfooter></myfooter>

	
	

    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';



export default {
  data () {
    return {
	  // 面包屑导航数据
	  	datas: [
			{title: '首页', route:{name: 'index'}},
			{title: '考试页面', route:{name: 'homework'}},
		],
		src:'',
		// 令牌
		uptoken:'',
		url:'',
		video_name:'',
		// 切换按钮变量
		mybutton: '进入画中画'
    }
  },
  mounted:function(){
	  
		this.get_token();
		
		this.$i18n.locale = localStorage.getItem('lang')
  },
  methods:{
		// 令牌获取函数
		get_token(){
			this.axios.get('http://127.0.0.1:8000/gettoken/?uid=' + localStorage['uid'] + '&jwt=' + localStorage['jwt']).then((result)=>{
				console.log(result.data)
				this.uptoken = result.data.uptoken;

			})
		},
		
		//上传七牛云
		upload_qiniu:function(e){

			//声明文件对象
			let file = e.target.files[0];
			this.video_name = file.name
			console.log(file)
			//声明参数类型
			let param = new FormData();
			//添加文件
			param.append('file',file);
			param.append('token',this.uptoken);
			//定制axios请求
			const axios_qiniu = this.axios.create({withCredentials:false});
			axios_qiniu({

				method:'POST',
				url:'http://up-z1.qiniu.com/',
				data:param,
				timeout:30000,

			}).then(result =>{

				console.log(result.data);
				this.url = 'http://q68ml0e0k.bkt.clouddn.com/' + result.data.key;
				this.imageload = '100%'
			});
		},
		// 画中画切换
		changepic(){
			if(video !== document.pictureInPictureElement){
				video.requestPictureInPicture();
				this.mybutton = '退出画中画';
			}else{
				document.exitPictureInPicture();
				this.mybutton = '进入画中画';
			}

		},
		// 切换页面语言
		changelang(){
			let changeNum = e.target.value[0];
			console.log(changeNum)
			if(changeNum==1){
				localStorage['lang'] ='cn'
			}else{
				localStorage['lang'] ='en'
			}
			
			this.$i18n.locale = localStorage.getItem('lang')
		}
		
  },
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
  }
}


</script>
 
<style>



</style>